<template>
<div>
    <a-dropdown :trigger="['click']">
        <a-tooltip>
            <template slot="title">
                原名：{{axis.alia}}
            </template>
            <div class="x-axis" @mouseenter="deleteStyle = 'opacity: 1'" @mouseleave="deleteStyle = 'opacity: 0'">
                <i class="el-icon-arrow-down"></i>
                <span>{{ axis.rename }}</span>
                <span v-if="axis.dataType === DataType.DATE">({{ groupType[axis.groupType] }})</span>
                <i class="el-icon-error" :style="deleteStyle" @click="handleDelete"></i>
            </div>
        </a-tooltip>
        <a-menu slot="overlay" @click="handleMenuClick" style="width: 150px">
            <a-menu-item key="rename">修改显示名称</a-menu-item>
            <a-sub-menu v-if="axis.dataType === DataType.DATE" key="groupType" title="分组">
                <a-menu-item style="width: 150px" v-for="(value, key ) in groupType" :key="key">{{value}}</a-menu-item>
            </a-sub-menu>
            <a-menu-item key="delete">删除字段</a-menu-item>
        </a-menu>
    </a-dropdown>
    <div class="axis-dialog" v-show="renameVisible">
        <div style="margin-bottom: 5px">
            <a-input v-model="name" />
        </div>
        <div class="buttoms">
            <a-button @click="renameVisible = false">
                取消
            </a-button>
            <a-button type="primary" @click="handleRenameOk">
                确定
            </a-button>
        </div>
    </div>
</div>
</template>

<script>
import {DataType} from '@/filterConstant'
export default {
    props:{
        axis: Object
    },
    data(){
        return {
            DataType,
            deleteStyle: "opacity: 0",
            name: '',
            renameVisible: false,
            groupType: {
                minute: '分',
                hour: '时',
                day: '日',
                // week: '周',
                mouth: '月',
                // quater: '季',
                year: '年'
            },
        }
    },
    mounted(){
        if(this.axis.includeTime){
            this.groupType = {
                minute: '分',
                hour: '时',
                day: '日',
                mouth: '月',
                year: '年'
            }
        } else {
            this.groupType = {
                day: '日',
                mouth: '月',
                year: '年'
            }
        }
    },
    methods:{
        handleDelete(){
            this.$emit('deleteDrag', this.axis.uuid, 'xAxis')
        },
        handleMenuClick(e){
            const {key, keyPath} = e
            if(key === 'rename') {
                this.name = this.axis.rename
                this.renameVisible = true
            } else if (key === 'delete') {
                this.handleDelete()
            } else if (keyPath[ keyPath.length - 1 ] === 'groupType') {
                this.$emit('change', this.axis.uuid, 'xAxis', {groupType: key})
            }
        },
        handleRenameOk(){
            this.$emit('change', this.axis.uuid, 'xAxis', {rename: this.name})
            this.renameVisible = false
        }
    },

};
</script>

<style lang="less">
    .x-axis{
        background: rgb(79, 150, 255);
        color: #fff;
        padding: 0 10px;
        margin: 2px;
        height: 28px;
        line-height: 28px;
        border-radius: 14px;
        cursor: pointer;

        span{
            margin: 0 5px;
        }
    }

    .axis-dialog{
        position: absolute;
        background-color: #fff;
        z-index: 1;
        padding: 10px;
        width: 220px;
        height: 100px;
        border-radius: 2px;
        box-shadow: 0 0 6px rgb(51 51 51 / 20%);

        input{
            color: black !important;
            border-color: #e0e0e0 !important;
            font-weight: 400;
            border-radius: 2px;
        }

        .buttoms{
            display: flex;
            justify-content: space-between;
            margin-top: 10px;

            button{
                width: 90px;
            }
        }
    }
</style>